<template>
  <div class="table" style="padding:20px">
    <div style="overflow: auto; height: 850px">
      <div style="padding-block-end: 10px">
        <el-input id="task_name" v-model="env_page.env_name" placeholder="请输入环境名称" style="width: 800px; padding-right: 10px;" />
        <el-button type="primary" @click="get_env_all">搜索</el-button>
        <el-button style="float: right" type="success" @click="add_dialog">新增环境</el-button>
      </div>
      <div>
        <el-table
          :data="table_data"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          style="float:left;width:100%"
        >
          <el-table-column align="center" label="ID">
            <template slot-scope="scope">
              {{ scope.row.environment_id }}
            </template>
          </el-table-column>
          <el-table-column label="环境名称" width="300px">
            <template slot-scope="scope">
              {{ scope.row.environment_name }}
            </template>
          </el-table-column>
          <el-table-column label="环境地址" width="300px">
            <template slot-scope="scope">
              {{ scope.row.environment_address }}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="描述" align="center">
            <template slot-scope="scope">
              {{ scope.row.environment_e_describe }}
            </template>
          </el-table-column>
          <el-table-column label="更新人" align="center">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column align="left" prop="update_time" label="update_time">
            <template slot-scope="scope">
              <span>{{ scope.row.update_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="create_time" label="create_time">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="action" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="edit_dialog(scope.row.environment_id)">编辑</el-button>
              <el-button type="danger" size="small" @click="del_dialog(scope.row.environment_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          :current-page="env_page.current_page"
          :page-sizes="[10, 20, 50]"
          :page-size="env_page.size_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="case_total"
          style="float: left; padding: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div style="padding: 50px">
        <el-dialog
          title="环境"
          :visible.sync="add_env_dialog"
          width="40%"
        >
          <el-form ref="form" :model="env_form" label-width="100px">
            <el-form-item label="环境名称：">
              <el-input v-model="env_form.environment_name" />
            </el-form-item>
            <el-form-item label="环境地址：">
              <el-input v-model="env_form.environment_address" />
            </el-form-item>
            <el-form-item label="环境描述：">
              <el-input v-model="env_form.environment_describe" />
            </el-form-item>
            <el-form-item>
              <div v-show="1 === number">
                <el-button v-if="create_task" type="primary" style="float: right" @click="add_env">立即创建</el-button>
              </div>
              <div v-show="2 === number">
                <el-button v-if="create_task" type="primary" style="float: right" @click="edit_env">保存</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div>
        <el-dialog
          title="提示"
          :visible.sync="del_env_dialog"
          width="18%"
        >
          <span>环境变量删除确认后，即可删除</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="del_env_dialog = false">取 消</el-button>
            <el-button type="primary" @click="del_env">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import { add_environment, del_environment, edit_environment, get_envall, get_environment } from "@/api/environment"
export default {
  name: "EnvList",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    vueJsonEditor
  },
  data() {
    return {
      del_env_dialog: false,
      table_data: [],
      add_env_dialog: false,
      create_task: true,
      environment_id: null,
      env_page: {
        env_name: "",
        current_page: 1,
        size_page: 10,
      },
      case_total: 0,
      number: null,
      env_form: {
        environment_name: "",
        environment_address: "",
        environment_describe: ""
      }
    }
  },
  created() {
    this.get_env_all()
    this.is_login()
  },
  methods: {
    is_login() {
      // eslint-disable-next-line no-prototype-builtins
      if (localStorage.hasOwnProperty("user_id") === false || localStorage.getItem("user_id") === '') {
        this.$router.push("/login")
        this.$message.error("登录失效，请前往登录")
      }
    },
    // 页签-条/页 跳转
    handleSizeChange(val) {
      this.env_page.size_page = val
      this.get_env_all()
    },
    // 底部页签跳转
    handleCurrentChange(val) {
      this.env_page.current_page = val
      this.get_env_all()
    },
    get_env_all() {
      const req = this.env_page
      req.user_id = localStorage.getItem("user_id")
      get_envall(req).then(res => {
        if (res.data.code === 200) {
          this.table_data = res.data.content
          this.case_total = res.data.case_total
          this.env_page.current_page = res.data.current_page
          this.env_page.size_page = res.data.size_page
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_dialog(environment_id) {
      this.number = 2
      this.add_env_dialog = true
      this.environment_id = environment_id
      get_environment({ "env_id": this.environment_id, "user_id": localStorage.getItem("user_id") }).then(res => {
        if (res.data.code === 200) {
          this.env_form = res.data.content[0]
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    add_dialog() {
      this.env_form = {
        environment_name: "",
        environment_address: "",
        environment_describe: ""
      }
      this.number = 1
      this.add_env_dialog = true
    },
    add_env() {
      const req = this.env_form
      req.environment_name = this.env_form.environment_name
      req.environment_address = this.env_form.environment_address
      req.environment_describe = this.env_form.environment_describe
      req.user_id = Number(localStorage.getItem("user_id"))
      add_environment(this.env_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_env_dialog = false
          this.get_env_all()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_env() {
      const req = this.env_form
      req.env_id = this.environment_id
      req.environment_name = this.env_form.environment_name
      req.environment_address = this.env_form.environment_address
      req.environment_describe = this.env_form.environment_describe
      req.user_id = Number(localStorage.getItem("user_id"))
      edit_environment(this.env_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_env_dialog = false
          this.get_env_all()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    del_env() {
      const req = {}
      req.env_id = this.environment_id
      req.user_id = Number(localStorage.getItem("user_id"))
      del_environment(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.del_env_dialog = false
          this.get_env_all()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    del_dialog(env_id) {
      this.del_env_dialog = true
      this.environment_id = env_id
    }
  }
}
</script>

<style lang="scss">

</style>
